<!--
 * @Description: 任务管理
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:31
 * @LastEditTime: 2024-03-12 13:38:24
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\task\list.vue
-->
<template>
  <div class="biz-box-wrap">
    <!-- 1、搜索区 -->
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <!-- 关键字 -->
      <el-form-item>
        <el-input v-model="state.dataForm.keyword" :placeholder="`${$t('task.name')}/${$t('task.projectName')}`" clearable></el-input>
      </el-form-item>

      <!-- 任务状态 -->
      <el-form-item>
        <el-select v-model="state.dataForm.status" clearable :placeholder="$t('task.status')">
          <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('assess:assesstask:save')" type="primary" @click="addOrUpdateHandle({ id: '' })">{{ $t("add") }}</el-button>
      </el-form-item>
    </el-form>

    <!-- 2、表格区 -->
    <el-table max-height="calc(100vh - 256px)" v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <!-- 2.1、表格列 -->
      <el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
      <el-table-column prop="name" :label="$t('task.name')" header-align="center" align="center" min-width="90" />
      <el-table-column prop="projectName" :label="$t('task.projectName')" header-align="center" align="center" min-width="90" />
      <el-table-column prop="userNum" :label="$t('task.userNum')" header-align="center" align="center" min-width="90" />
      <el-table-column prop="acceptNum" :label="$t('task.acceptNum')" header-align="center" align="center" min-width="90" />
      <el-table-column prop="salary" :label="$t('task.salary')" header-align="center" align="center" min-width="90">
        <template #default="{ row }"> {{ row.salary }}/{{ row.salaryType }} </template>
      </el-table-column>

      <el-table-column prop="status" :label="$t('task.status')" header-align="center" align="center" min-width="80">
        <template #default="{ row }">
          <div class="status_tag info" v-if="row.status === TASK_STATUS.UN_START">未开始</div>
          <div class="status_tag primary" v-else-if="row.status === TASK_STATUS.IN_PROGRESS">进行中</div>
          <div class="status_tag primary" v-else-if="row.status === TASK_STATUS.FINISHED">已完成</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column prop="days" :label="$t('task.days')" header-align="center" align="center" min-width="90" />
      <!-- <el-table-column prop="transmit" :label="$t('task.transmit')" header-align="center" align="center" min-width="90" /> -->
      <el-table-column prop="notes" :label="$t('task.notes')" header-align="center" align="center" min-width="90" />

      <!-- 2.2、操作列 -->
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="200">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('assess:assesstask:info')" type="primary" link @click="onViewDetail(scope.row)">{{ $t("detail") }}</el-button>
          <el-button v-if="state.hasPermission('assess:assesstask:update')" type="primary" link @click="addOrUpdateHandle(scope.row)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('assess:assesstask:delete')" type="danger" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          <!-- <el-button v-if="state.hasPermission('assess:assesstask:settlement')" type="primary" link @click="goToSettlement(scope.row)">结算</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import baseService from "@/service/baseService";
import AddOrUpdate from "./add-or-update.vue";
import { useI18n } from "vue-i18n";
import { TASK_STATUS, statusList } from "./type";

const { t } = useI18n();

const router = useRouter();

const view = reactive({
  getDataListURL: "/assess/assesstask/page",
  getDataListIsPage: true,
  deleteURL: "/assess/assesstask",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    keyword: "",
    status: "",
    order: "desc",
    orderField: "create_date"
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (row?: any) => {
  addOrUpdateRef.value.init(row);
};

// 查看详情
const onViewDetail = async (row: any) => {
  router.push({
    path: "/task/detail",
    query: { id: row.id }
  });
};

// 去结算
const goToSettlement = async (row: any) => {
  console.log("row");
  router.push({
    path: "/task/settlement",
    query: { id: row.id }
  });
};

defineExpose({
  TASK_STATUS
});
</script>
<style lang="less" scoped>
.task-img {
  width: 100px;
  height: 70px;
  object-fit: contain;
}
</style>
